<template>
  <li>
    <div class="img-wrap df-center">
      <!--file-type-icon-->
      <i class="iconfont fs30 c666" :class="[fileIcon]"></i>
      <!--del-btn-->
      <i class="del iconfont icon-add" @click="delFile"></i>
      <!--add-->
      <div class="add-wrap" @click="addFile">
        <div class="add df-center">
          <i class="iconfont icon-plus-bold"></i>
        </div>
      </div>
      <div class="loading-wrap df-center" v-show="isLoading">
        <i class="el-icon-loading theme-color"></i>
      </div>
    </div>
    <div class="name line-clamp2 c666">{{item.name}}</div>
  </li>
</template>

<style scoped lang="scss">
  li {
    list-style: none;
    height: 100%;
    width: 100px;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    .name {
      white-space: initial;
      margin-top: 5px;
      text-align: center;
      font-size: 13px;
    }
    .img-wrap {
      position: relative;
      width: 60px;
      height: 60px;
      margin: 0 auto;
      border: 1px dashed $border;
      border-radius: 4px;
      .del {
        position: absolute;
        right: -10px;
        top: -10px;
        color: red;
        transform: rotate(45deg);
        font-size: 20px;
        z-index: 2;
        cursor: pointer;
      }
      .add-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .add {
          display: none;
          width: 100%;
          height: 100%;
          z-index: 1;
          background-color: rgba(255, 255, 255, .8);
          i.iconfont {
            font-size: 30px;
            color: rgba(34, 215, 187, 0.8);
          }
        }
        &:hover {
          .add {
            display: flex;
            cursor: pointer;
          }
        }
      }
      .loading-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .8);
        i {
          font-size: 24px;
        }
      }

    }
  }
</style>

<script>
  export default {
    props: {
      item: [Object, File],
      index: Number,
      path: String,
    },
    components: {},
    data() {
      return {
        isLoading: false
      }
    },
    watch: {},
    computed: {
      fileIcon  () {
        let typeClass = 'icon-file'

        if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'tif', 'bmp'].indexOf(this.item._type) > -1) {
          typeClass = 'icon-picture'
        }
        if (['et', 'xlsx', 'xle'].indexOf(this.item._type) > -1) {
          typeClass = 'icon-excel'
        }
        if (['wps', 'doc', 'docx'].indexOf(this.item._type) > -1) {
          typeClass = 'icon-word'
        }
        if (this.item._type == 'pdf') {
          typeClass = 'icon-pdf'
        }

        return typeClass
      }
    },
    methods: {
      delFile () {
        this.$emit('delFile', this.index)
      },
      addFile () {
        this.isLoading = true
        this.$fs.copy(this.item.path, this.path + this.item.name, {
          overwrite: false,
          errorOnExist: true
        }).then(data => {
          this.isLoading = false
          this.delFile()

          this.$message({
            message: '操作成功！',
            type: 'success',
            duration: 1000,
          });

          this.$emit('addFile')

        }).catch(err => {
          this.isLoading = false
          this.$message.error('操作失败：' + err.message);
        })
      },
    },
    mounted() {},
  }
</script>

